<template>
	<el-dialog v-model="display" title="配置信息" top="6vh" width="380px" center>
		<div class="config-info">
			<el-form label-width="90px" label-position="top">
				<el-form-item label="配置ID：">
					<el-input v-model="data.id" disabled></el-input>
				</el-form-item>
				<el-form-item :label="'配置变量：'+data.key">
					<el-input v-model="data.key" disabled></el-input>
				</el-form-item>
				<el-form-item label="配置名称：">
					<el-input placeholder="请输入" v-model="data.title" show-word-limit maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="排序 (数字越大，配置在越前面，0最小) ：">
					<el-input placeholder="请输入" v-model="data.sort" type="number"></el-input>
				</el-form-item>
			</el-form>

<div>接口：通过id || key || type 获取配置：</div>
<div>api/common/get_config_list?key={{data.key}}</div>
<br/>
<div>通过id || key || type 获取配置 （键值对）：</div>
<div>api/common/get_config_key_value</div>
<br/>
<pre>
php根据key获取
$this->formatConfig('{{data.key}}');
</pre>
<br/>
		</div>
		


	</el-dialog>
</template>

<script setup>
	const emit = defineEmits(['update:show'])
	const props = defineProps({
		show: {
			type:Boolean,
			default:false
		},
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	
	const display = ref(true);
	
	watch(props,(newVal,oldVal)=>{
		display.value = newVal.show;
	},{ immediate: true })
	
	watch(display,(newVal,oldVal)=>{
		emit('update:show', newVal)
	},{ immediate: true })
</script>

<style lang="scss" scoped>
	.config-info{
		padding: 0 10px;
		pre{margin-top:20px;}
	}
</style>